<template>
	<view class="fixtop">
		<fixtopVue>
			<template #l>
				<view class="fixtop-l" @click="back">
					<view class="iconfont icon-jiantouyou"></view>
				</view>
			</template>
			<template #c>
				<view class="fixtop-c">
					<view class="fix-tit">
						评价详情
					</view>
				</view>
			</template>
		</fixtopVue>
	</view>
	<view class="conbox">
		<view class="item">订单编号：1242141421441</view>
		<view class="item">店铺名称：ximo店铺</view>
		<view class="item">顾客名称：王*帅</view>
	</view>
	<view class="conbox">
		<view class="item flex">商家服务： <view class="xx">
				<view class="iconfont icon-xingxing" v-for="i in 5" :key="i" :style="{color:i!==5?'#ff644d':''}"></view>
			</view>
			<view class="" style="margin: 0 30rpx;">味道4星</view>
			<view class="">包装5星</view>
		</view>
		<view class="item flex">配送服务： <view class="xx">
				<view class="iconfont icon-xingxing" v-for="i in 5" :key="i" :style="{color:i!==5?'#ff644d':''}"></view>
			</view>
		</view>
	</view>
	<view class="conbox">
		<view class="item">推荐商品：口水鸡</view>
		<view class="item">点餐菜品：清水白菜</view>
		<view class="item">评价内容：服务好，好吃，口味一六</view>
		<view class="img">
			 <view class="" style="width:fit-content;">评价图片：</view>
			 <view class="imgbox">
				  <image src="/static/logo.png" mode="aspectFill"></image>
				  <image src="/static/logo.png" mode="aspectFill"></image>
				  <image src="/static/logo.png" mode="aspectFill"></image>
			 </view>
		</view>
		<view class="item">评价时间：2002-11-22</view>
	</view>
	<view class="conbox">
		<view class="item">商家回复：感谢回复我们会做的更好！</view>
		<view class="item">回复时间：2001-22-11</view>
	</view>
</template>

<script setup>
	import fixtopVue from '../../components/fixtop/fixtop.vue';
	import {
		getstatusheight,
		gettitleheight
	} from '@/utils/getsysteminfo.js'
	const back = () => {
		uni.navigateBack()
	}
</script>

<style lang="scss" scoped>
	.img{
		font-size: 25rpx;
		display: flex;
		.imgbox{
			flex: 1;
			display: flex;
			gap: 10rpx;
			image{
				height: 150rpx;
				width: 150rpx;
				border-radius: 10rpx;
			}
		}
	}
	.xx {
		display: flex;
		.iconfont {
			font-size: 25rpx;
		}
	}

	.conbox {
		height: fit-content;
		border-bottom: 1rpx solid #f4f4f4;
		padding: 20rpx;

		.flex {
			display: flex;
			align-items: center;
		}

		.item {
			font-size: 26rpx;
			margin: 30rpx 0;
		}
	}

	.fixtop {
		background-color: #ff644d;

		.fixtop-l,
		.fixtop-c {
			height: 100%;
			width: 100%;
			display: flex;
			align-items: center;
			color: #fff;
		}

		.fixtop-l {
			padding-left: 20rpx;

			.iconfont {
				transform: rotate(180deg);
				font-size: 25rpx;
			}
		}

		.fixtop-c {
			justify-content: center;
			font-size: 31rpx;
		}
	}
</style>